<template>
  <div class="vueJsonEditor">
    <vue-json-editor
      v-model="json"
      :show-btns="false"
      :mode="type"
      lang="zh"
      @json-change="onJsonChange"
    />
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'

export default {
  components: {
    vueJsonEditor
  },
  props: {
    value: {
      type: Object,
      default: null
    },
    type: {
      type: String,
      default: 'code'
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      json: null
    }
  },
  watch: {
    value(val) {
      this.json = JSON.parse(JSON.stringify(val))
    }
  },
  mounted() {
    this.$nextTick(() => {
      var editors = document.getElementsByClassName('jsoneditor-vue')
      for (var i = 0; i < editors.length; i++) {
        editors[i].style.height = `${this.height}px`
      }
    })
    this.json = this.value
  },

  methods: {
    onJsonChange(value) {
      this.$emit('input', value)
    }
  }
}
</script>

